
<template>
  <div class="content">
    <div class="section">
      
      <navigator class="list_box" v-for="(item, i) in live.liveData" :key="i" :url="`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${item.roomid}`">
        <div class="inset" >
          <div class="img">
            <img
              :src="item.cover_img" alt=""
            />             
          </div>
          <div class="one">
            <span class="one_span">开播：{{ item.start_time }}</span>
          </div>
          <div class="two">
            <span class="two_span">{{ item.name }}</span>
          </div>
          <div class="three">
            <div class="inset_user">
              <span class="avatar">主播</span>
              <span class="nameClass">{{ item.anchor_name }}</span>
            </div>
          </div>
        </div>
      </navigator>

      <div class="list_box">
        <div class="inset" @click="handleClick">
          <div class="img">
            <img
              src="../../static/images/icon/cat1.jpg" alt=""
            />             
          </div>
          <div class="one">
            <span class="one_span">开播：432432423</span>
          </div>
          <div class="two">
            <span class="two_span">432423423</span>
          </div>
          <div class="three">
            <div class="inset_user">
              <span class="avatar">主播</span>
              <span class="nameClass">432432423</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions({
      liveList: "live/liveList"
    }),
   handleClick:function(){
     uni.navigateTo({ url: '/pages/live/open-live' })
   }
       
  },
  computed: {
    ...mapState(["live"])
  },
  async onLoad() {
    await this.liveList();
  },

  mounted() {}
};
</script>

<style >
.content {
  display: flex;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.section {
  display: flex;
  width: 100%;
  height: 100%;
  background-color: #f4f4f4;
  min-height: 100vh;
  flex-wrap: wrap;
}
.list_box {
  width: 360.18rpx;
  height: 552.62rpx;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}
.list_box .inset {
  display: flex;
  flex-direction: column;
  width: 330.18rpx;
  height: 512.62rpx;
  border-radius: 10%;
}
.inset .img {
  width: 100%;
  height: 330rpx;
  background-color: white;
}
.img > img {
  width: 100%;
  height: 330rpx;
}
.inset .one {
  width: 100%;
  height: 36.8rpx;
  font-size: 19rpx;
  padding-top: 12rpx;
  background-color: #fff;
}
.one .one_span {
  margin: 10rpx;
  line-height: 36.8rpx;
  color: #999;
}
.inset .two {
  width: 100%;
  height: 52.8rpx;
  background: #fff;
  line-height: 52.8rpx;
}
.two .two_span {
  margin: 10rpx;
  font-size: 35rpx;
}
.inset .three {
  width: 100%;
  height: 75.02rpx;
  background: #fff;
  display: flex;
}
.three .inset_user {
  margin-left: 10rpx;
  margin-right: 10rpx;
  width: 100%;
  line-height: 75.02rpx;
}
.inset_user .avatar {
  display: inline-block;
  width: 75.02rpx;
  height: 75.02rpx;
  border-radius: 50%;
  background-color: rgb(244, 218, 208);
  color: rgb(222, 184, 135);
}
.inset_user .nameClass {
  font-size: 40rpx;
}
.list_box2 {
  width: 360.18rpx;
  height: 552.62rpx;
  background-color: rgb(53, 37, 9);
}
</style>
